<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>DanmuWall</title>
<style>
@-webkit-keyframes dmfly{
	100% {-webkit-transform: translate(-100%); }
}
@-moz-keyframes dmfly{
	100% {-moz-transform: translate(-100%); }
}
@-o-keyframes dmfly{
	100% {-o-transform: translate(-100%); }
}
@keyframes dmfly{
	100% {transform: translate(-100%); }
}

.danmu{
	white-space:nowrap;
	position:absolute;
	font-size:32px;
	color:white;
	z-index:999;
	font-family: SimHei, SimSun, Heiti, 'MS Mincho', Meiryo, 'Microsoft YaHei', monospace;
	-webkit-animation: dmfly 7s linear forwards;
	-moz-animation: dmfly 7s linear forwards;
	-o-animation: dmfly 7s linear forwards;
	animation: dmfly 7s linear forwards;
}
body{
	overflow:hidden;
	margin:0 0 0 0;
	/*background-image:url(/images/2237607.jpg);*/
	background-image:url(http://i3.tietuku.com/0d72f136dcb60943.jpg);
}

</style>
<script src="/js/socket.io.js"></script>
<script src="/js/jquery.min.js"></script>
<head>
<body>
<script>
function Danmu(bkdiv)
{
	var bk=$(bkdiv);
	return function(s){
		var dm=$('<span class="danmu"></span>').
		append(document.createTextNode(s.danmu)).
		appendTo(bkdiv);
		var rcolor=s.color=='white'?'rgb(0,0,0)':'rbg(255,255,255)';
		dm.css({
			top:Math.random()*(bk.height()-dm.height()),
			left:bk.width(),
			width:bk.width()+dm.width(),
			color:s.color,
			'text-shadow': rcolor+' -1px 0px 0px, '+rcolor+' 0px 1px 0px, '+rcolor+' 1px 0px 0px, '+rcolor+' 0px -1px 0px'
		});
	};
}
var SendDanmu=Danmu('body');
var socket = io();
socket.on('danmu', function (data) {
	SendDanmu(data);
});
</script>
</body>
<html>